<template>
  <div class="icon-page">
    <div class="van-nav-head">
      <!-- van-nav-head:46px -->
      <van-nav-bar title="ok-icon" left-arrow @click-left="$router.go(-1)" :fixed="true"/>
    </div>

    <van-tabs color="#1989fa" v-model="active">
      <!-- van-tabs: height:44px -->
      <van-tab :title="'线性字体(' + iconLinear.length + ')'">
        <div class="icon-list">
          <div v-for="(item,index) in iconLinear" @click="onCopyText(item)" class="icon-item">
            <ok-icon size="32px" :name="item.font_class"></ok-icon>
            <span class="text">{{ item.font_class }}</span>
          </div>
        </div>
      </van-tab>

      <van-tab :title="'实底字体(' + iconFill.length + ')'">
        <div class="icon-list">
          <div v-for="(item,index) in iconFill" @click="onCopyText(item)" class="icon-item">
            <ok-icon size="32px" :name="item.font_class"></ok-icon>
            <span class="text">{{ item.font_class }}</span>
          </div>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>
<script type="es6">
import iconfont from "@/components/ok/fonts/iconfont.json";

export default {
  inject: ['reload'], /**reload(callback);对应provide中的数组值*/
  name: "icon",
  data() {
    let iconLinear = [];
    let iconFill = [];
    iconfont.glyphs.forEach((item, index) => {
      if (item.font_class.indexOf("fill") >= 0) {
        iconFill.push(item);
      } else {
        iconLinear.push(item);
      }
    });
    return {
      active: 0,
      iconfont,
      iconFill,
      ok_icon: "",
      iconLinear
    }
  },
  mounted() {

  },
  methods: {
    onCopyText(item) {
      let that = this;
      let ok_icon = `<ok-icon name="${item.font_class}"></ok-icon>`;
      this.$copyText(ok_icon).then(res => {
        this.$notify({
          type: 'success',
          message: `复制成功：${ok_icon}`
        });
      }).catch(err => {
        this.$notify({
          type: 'danger',
          message: '复制失败'
        });
      });
    }
  }
}
</script>

<style lang="scss" scoped>

.icon-page {
  ::v-deep {
    .van-tab--active .van-tab__text {
      color: #1989fa;
    }
  }
}

.icon-list {
  display: grid;
  margin: 15px;
  border-radius: 20px;
  background: #FFFFFF;
  grid-template-columns: repeat(4, 1fr);
  height: calc(100vh - 90px - 30px);
  overflow: auto;

  .icon-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: 10px;

    &:active {
      background: #F7F7F7;
    }

    .text {
      white-space: pre-wrap;
      word-break: break-all;
      text-align: center;
      font-size: 12px;
      width: 72px;
      height: 32px;
      overflow: hidden;
    }
  }
}
</style>